/**
 * @author shaosong
 * @description 颜色预览内容
 */
import { Button, Space, Spin } from "antd";
import React from "react";
import { useHistory } from "react-router-dom";
import "./ColorContext.less";

export class ColorContextProps {
  colorGlobel: any;
}

const ColorContext: React.FC<ColorContextProps> = (props) => {
  const colorGlobel = props.colorGlobel;
  const history = useHistory();
  return React.useMemo(
    () => (
      <div title="这里是背景" className="page-color-context" style={{ backgroundColor: colorGlobel?.["--bg-color"] }}>
        <div className="card" title="这里是卡片背景" style={{ backgroundColor: colorGlobel?.["--card-bg-color"] }}>
          <div title="这里是标题">
            <div className="line_height" style={{ color: colorGlobel?.["--h1-font-color"], fontSize: 24 }}>
              H1 一级标题
            </div>
            <div className="line_height" style={{ color: colorGlobel?.["--h2-font-color"], fontSize: 20 }}>
              H2 二级标题
            </div>
            <div className="line_height" style={{ color: colorGlobel?.["--h3-font-color"], fontSize: 16 }}>
              H3 三级标题
            </div>
            <div className="line_height" style={{ color: colorGlobel?.["--h4-font-color"], fontSize: 14 }}>
              H4 四级标题
            </div>
            <div className="line_height" style={{ color: colorGlobel?.["--h5-font-color"], fontSize: 12 }}>
              H5 五级标题
            </div>
          </div>
          <div title="这里是文本内容">
            <div className="line_height" style={{ color: colorGlobel?.["--h2-font-color"], fontSize: 18 }}>
              下面是文本内容区域
            </div>
            <div style={{ color: colorGlobel?.["--text-font-color"], fontSize: 12, padding: "16px 0" }}>
              这里是文本内容，这里是文本内容，这里是文本内容，这里是文本内容，
              这里是文本内容，这里是文本内容，这里是文本内容，这里是文本内容，
              这里是文本内容，这里是文本内容，这里是文本内容，这里是文本内容。
            </div>
          </div>

          <div title="这里是按钮区域">
            <div className="line_height" style={{ color: colorGlobel?.["--h2-font-color"], fontSize: 18 }}>
              下面是按钮区域
            </div>
            <Space>
              <Button style={{ backgroundColor: colorGlobel?.["--btn-primary-color"], color: "#fff" }}>主按钮</Button>
              <Button
                type="default"
                style={{
                  backgroundColor: colorGlobel?.["--btn-default-color"],
                  borderColor: colorGlobel?.["--btn-default-border-color"],
                }}>
                默认按钮
              </Button>
              <Button
                disabled
                style={{ backgroundColor: colorGlobel?.["--disabled-bg-color"], color: "#fff", margin: "16px 0" }}>
                不可选
              </Button>
              <Button
                type="link"
                style={{ color: colorGlobel?.["--url-font-color"] }}
                onClick={(): void => history.push("contrast")}>
                超链接
              </Button>
            </Space>
          </div>

          <div title="这里是提示信息区域">
            <div
              className="line_height"
              style={{ color: colorGlobel?.["--h2-font-color"], fontSize: 18, margin: "16px 0" }}>
              下面是提示信息区域
            </div>
            
            <Spin  tip='加载颜色' size='small' style={{ color: colorGlobel?.["--tip-loading-color"] }} />

            <div className="tip" style={{ backgroundColor: colorGlobel?.["--tip-success-color"] }}>
              Success Text
            </div>
            <div className="tip" style={{ backgroundColor: colorGlobel?.["--tip-info-color"] }}>
              Info Text
            </div>
            <div className="tip" style={{ backgroundColor: colorGlobel?.["--tip-warning-color"] }}>
              Warning Text
            </div>
            <div className="tip" style={{ backgroundColor: colorGlobel?.["--tip-error-color"] }}>
              Error Text
            </div>
          </div>
        </div>
      </div>
    ),
    [colorGlobel],
  );
};

ColorContext.defaultProps = new ColorContextProps();
export default ColorContext;
